<template>
	<navigator url="/pages/index/index" open-type="redirect" hover-class="other-navigator-hover">
		<button type="default">回首页</button>
	</navigator>
	<view>
		<text>普通列表的循环</text>
		<!-- 在v-xxx标签中可以直接使用变量名，会被自动解析，在标签包含内容中需要使用 {{}} -->
		<li v-for="item in items">
			lang: {{item.lang}}, priotiry: {{item.priority}}
		</li>
	</view>
	<view>
		<text>循环带索引的形式</text>
		<li v-for="(item, index) in items">
			{{index}}: {{item.lang}} ({{item.priority}})
		</li>
	</view>
	<view>
		<text>循环带解构的形式</text>
		<li v-for="({lang, priority}, index) in items">
			{{index}}: {{lang}} ({{priority}})
		</li>
	</view>
	<view>
		<text>遍历对象</text>
		<li v-for="(value, key) in phpLang">
			{{key}}: {{value}}
		</li>
	</view>
	<view>
		<text>生成范围值</text>
		<li v-for="n in 5">
			{{n}}
		</li>
	</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
	// v-for指令基于数组来渲染出一个html列表
	// 形式是 v-for="item in items"
	const items = ref([
		{"lang": "RUST", "priority": 5}, 
		{"lang": "PHP", "priority": 4}, 
		{"lang": "GO", "priority": 3}, 
		{"lang": "C", "priority": 2}
	])
	// 也可以遍历对象的属性
	const phpLang = reactive({
		"name": "PHP",
		"birthday": "1993",
		"author": "Rasmus Lerdorf",
		"function": "构建动态网页和 Web 应用程序"
	})
</script>

<style>
	       
</style>
